<template>
  <el-dropdown trigger="click" v-if="total>0">
    <div>
      <svg-icon class-name="size-icon" icon-class="bell"/>
      <el-badge :value="total" :max="99"></el-badge>
    </div>
    <el-dropdown-menu slot="dropdown" style="padding:10px; width:25%">
      <div class="msg-list">
        <el-collapse accordion @change="handleChange">
          <el-collapse-item v-for="(item,index) in msgList" v-bind:name="item.id" :key="index">
            <template slot="title">
              <div style="font-weight:bold; padding-left: 10px">{{item.title}}<span style="color: #CCCCCC;margin-left: 10px">{{item.createTime}}</span></div>
            </template>
            <div style="padding-left: 10px">{{item.content}}</div>
          </el-collapse-item>
        </el-collapse>
        <div style="text-align: right; padding-right: 10px">
          <el-button type="text" @click="handelAllMsg">查看全部</el-button>
        </div>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  import { listMsgByMe, readMsg } from '@/api/system/msg'

  export default {
    data() {
      return {
        msgList: [],
        total: 0,
        openRefresh: 0,
        queryParams: {
          readFlag: 0,
          pageNum: 1,
          pageSize: 5
        }
      }
    },
    async created() {
      let getConfigKey = this.getConfigKey('msg.refresh.open').then(response => {
        this.openRefresh = response.msg
      })
      await getConfigKey
      if (this.openRefresh == 1) {
        setInterval(() => {
          this.getList()
        }, 1000 * 30)
      } else {
        this.getList()
      }

    },
    methods: {
      handleChange(val) {
        readMsg(val)
      },
      handelAllMsg() {
        this.$router.push({ path: '/task/msg' })
      },
      /** 查询系统消息列表 */
      getList() {
        listMsgByMe(this.queryParams).then(response => {
          this.msgList = response.rows
          this.total = response.total
        })
      }
    }
  }
</script>
<style scoped>
  .msg-list {
    font-size: 12px;
    border-radius: 4px;
    background: #f4f6f8;
    border: 1px solid #dedede;
    overflow: auto;
  }
</style>
